<template>
	<view>
		<view class="listbox" v-if="info">
			<view class="listinfo">
				<view class="leftbox" v-if="info.img">
					<image :src="info && info.img.indexOf(',')!=-1?info.img.split(',')[0]:info.img"></image>
				</view>
				<view class="rightbox">
					<view class="namebox">
						<view>{{ info.course_name }}</view>
						<view class="statusbox">{{ pay_status[info.class_status] }}</view>
					</view>
					<view class="placebox">
						<!-- <view class="specbox">报名截止时间</view> -->
						<view>{{ info.address }}</view>
					</view>
					<view class="placebox">

						<view>老师:{{ info.teacher_name }}</view>
					</view>
				</view>
			</view>
			<view class="infobut" @click="toscan()">
				扫码核销
			</view>
		</view>
		<view v-for="(time, timeindex) in info.time" :key="timeindex">
			<view class="textbox">
				<view>{{ dateFormat(time.start_time) }}-{{ dateFormat(time.end_time) }}</view>
			</view>
			<view class="infobox">
				<view class="infoitem" v-for="(item, index) in time.hx_list" :key="index">
					<!-- <image src="../../static/logo.png"></image> -->
					<!-- 状态0待支付1已支付2已核销3已退款4已取消5已评价/已完成  -->
					<view class="name">{{ item.username }}</view>
					<view class="flex flex-1 ali-c flex-end" style="justify-content: flex-end;align-items: center;">
						<view :style="{ 'color': item.family_status == 1 ? '#FF8A9B' : '' }">{{
							family_status[item.family_status] }}
						</view>
						<view v-if="item.family_status == 1" class="eva-btn" style="background-color: orange;"
							@click="examine(item)">
							核销
						</view>
						<view @click="tocomment(item)" class="eva-btn" v-if="canEvaluate(item, timeindex)">评价</view>
						<view class="eva-btn" v-if="item.eval_status == 1" style="opacity: .6;">已评价</view>
						<view class="eva-btn"
							v-if="item.family_status == 2 && item.eval_status == 0 && overFlowTime(item, timeindex)"
							style="opacity: .6;">超期未评价</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <view class="textbox">
			<view>选择评价的学生</view>
		</view>
		<view class="imgbox">
			<view class="logobox" v-for="(item, index) in wpj_list" :key="index">
				<image :src="item.wxPhotoURL"></image>
				<view>{{ item.wpj_list }}</view>
			</view>
		</view> -->
		<!-- <view class="textbox">
			<view>已评价的学生</view>
		</view>
		<view class="imgbox">
			<view class="logobox" v-for="(item, index) in ypj_list" :key="index">
				<image :src="item.wxPhotoURL"></image>
				<view>{{ item.username }}</view>
			</view>
		</view> -->
		<view class="textbox">
			<view>课程信息</view>
		</view>
		<view class="actinfo">
			<view class="adderss">
				<view class="numbox">开课时间</view>
				<view class="numinfo">
					<view class="time">
						<!-- <view v-for="(item,index) in info.time" :key="index">
							{{dateFormat(item.start_time)}} - {{dateFormat(item.end_time)}}
						</view> -->
						<view>{{ info.course_time.start_day }} 至 {{ info.course_time.end_day }}</view>
					</view>
					<!-- <view v-for="(item,index) in info.time" :key="index">
						{{dateFormat(item.start_time)}}-{{dateFormat(item.end_time)}}
					</view> -->
				</view>
			</view>
			<view class="adderss">
				<view class="numbox">上课时间</view>
				<view class="weekbox">
					<view v-for="(item, index) in info.time_arr" :key="index">
						每周{{ week[item.week] }} {{ timeFormat(item.start_day) }} ~ {{ timeFormat(item.end_day) }}
					</view>
				</view>
			</view>
			<view class="adderss">
				<view class="numbox">活动地址</view>
				<view class="numinfo">
					<image src="../../static/dw1.png"></image>{{ info.address }}
				</view>
			</view>
		</view>
		<!-- <view style="height: 140rpx;"></view>
		<view class="navbut">
			<view @click="tocomment()">去评价学生</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: {},
				pay_status: ['待开课', '待上课', '待评价', '已完结', '进行中'], //0待开课1待上课2待评价3已完结4进行中
				ypj_list: [],
				wpj_list: [],
				family_status: ['待支付', '未核销', '已核销', '已退款', '已取消', '已评价'], //状态0待支付1已支付2已核销3已退款4已取消5已评价/已完成
				id: '',
				week: ['日', '一', '二', '三', '四', '五', '六', '日']
			}
		},
		onLoad(option) {
			this.getinfo(option.id)
			this.id = option.id
		},
		onShow() {
			this.getinfo(this.id)
		},
		methods: {
			examine(item) {
				uni.showModal({
					title: '提示',
					content: "确认核销？",
					success: ({
						confirm
					}) => {
						if (confirm) {
							this.$http({
								url: '/api/course/course_hx',
								data: {
									order_id: item.order_id,
									family_id: item.id
								}
							}).then(res => {
								this.getinfo(this.id)
								uni.showToast({
									title: res.msg,
									icon: 'none',
									duration: 3000
								})
							})
						}
					}
				})
			},
			overFlowTime(item, index) {
				let isLast = index == this.info.time.length - 1
				let lastClass = isLast ? this.info.time[index] : this.info.time[index + 1]
				let isOverFlow = new Date() > (isLast ? lastClass.end_time * 1000 : (lastClass.start_time + 86400 * 7) *
					1000)
				return isOverFlow
			},
			canEvaluate(item, index) {
				let isInTime = !this.overFlowTime(item, index)
				if (item.family_status == 2 && item.eval_status == 0 && isInTime) {
					return true
				} else {
					return false
				}
			},
			getinfo(id) {
				this.$http({
					url: '/api/course/teacher_order_detail',
					data: {
						id: id
					}
				}).then(res => {
					this.info = res.data
					this.ypj_list = res.data.ypj_list
					this.wpj_list = res.data.wpj_list
				})
			},
			// 扫码核销
			toscan() {
				// 只允许通过相机扫码
				let that = this
				uni.scanCode({
					onlyFromCamera: true,
					success: function(res) {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result, res.result.split(','));
						that.$http({
							url: '/api/course/course_hx',
							data: {
								order_id: res.result.split(',')[0],
								family_id: res.result.split(',')[1]
							}
						}).then(res => {
							this.getinfo(this.id)
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 3000
							})
						})
					}
				});
			},
			//时间戳
			dateFormat: function(value) {
				var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2);
				var sdate = ("0" + date.getDate()).slice(-2);
				var hour = ("0" + date.getHours()).slice(-2);
				var minute = ("0" + date.getMinutes()).slice(-2);
				var second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = year + "年" + month + "月" + sdate + "日 " + hour + ":" + minute //+ ":" + second;
				// 返回
				return result;
			},
			tocomment(item) {
				uni.navigateTo({
					url: '/pagemy/tocommentstudent/tocommentstudent?studentinfo=' + encodeURIComponent(JSON
						.stringify(item)) + '&myinfo=' + encodeURIComponent(JSON.stringify(this.info))
				})
			},
			timeFormat: function(value) {
				var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
				var year = date.getFullYear();
				var month = ("0" + (date.getMonth() + 1)).slice(-2);
				var sdate = ("0" + date.getDate()).slice(-2);
				var hour = ("0" + date.getHours()).slice(-2);
				var minute = ("0" + date.getMinutes()).slice(-2);
				var second = ("0" + date.getSeconds()).slice(-2);
				// 拼接
				var result = hour + ":" + minute //+ ":" + second;
				// 返回
				return result;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.eva-btn {
		padding: 0rpx 30rpx;
		background-color: #FF8A9B;
		color: white;
		border-radius: 100rpx;
		margin-left: 20rpx;
	}

	.listbox {
		width: 690rpx;
		padding: 0 30rpx;
		height: 326rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin-top: 20rpx;

		.listinfo {
			height: 218rpx;
			border-bottom: 2rpx solid #ECECEC;
			display: flex;
			align-items: center;

			.leftbox {
				width: 190rpx;
				background: #FFFFFF;
				border-radius: 6rpx;

				image {
					width: 160rpx;
					height: 160rpx;
				}
			}

			.rightbox {
				width: 500rpx;

				.namebox {
					font-size: 36rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #222222;
					-webkit-line-clamp: 1;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.name {
						width: 400rpx;
						-webkit-line-clamp: 1;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.statusbox {
						width: 100rpx;
						text-align: center;
						font-size: 28rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #FF8A9B;
					}
				}

				.placebox {
					font-size: 28rpx;
					font-family: Source Han Sans CN-Medium, Source Han Sans CN;
					font-weight: 500;
					color: #555555;
					display: flex;
					align-items: center;
					margin-top: 18rpx;

					image {
						width: 24rpx;
						height: 26rpx;
						margin-right: 14rpx;
					}

					.specbox {
						width: 68rpx;
						height: 38rpx;
						background: linear-gradient(180deg, #FCBB8C 0%, #FF8158 100%);
						border-radius: 4rpx 8rpx 8rpx 8rpx;
						line-height: 38rpx;
						text-align: center;
						font-size: 28rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #FFFFFF;
						margin-right: 18rpx;
					}
				}
			}
		}

		.infobut {
			width: 690rpx;
			height: 68rpx;
			background: #FF8A9B;
			border-radius: 36rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
			text-align: center;
			line-height: 68rpx;
			margin-top: 20rpx;
		}
	}

	.textbox {
		width: 690rpx;
		padding: 0 30rpx;
		height: 120rpx;
		line-height: 120rpx;
		font-size: 30rpx;
		font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
		font-weight: normal;
		color: #FF6178;
		background-color: #FFF;
		margin-top: 24rpx;
	}

	.infobox {
		width: 690rpx;
		padding: 0 30rpx 30rpx 30rpx;
		background-color: #FFF;
		display: flex;
		flex-direction: column;
		gap: 10rpx;

		.infoitem {
			display: flex;
			align-items: center;
			justify-content: space-between;
			line-height: 60rpx;
			font-size: 28rpx;

			.name {
				flex: 1;
				-webkit-line-clamp: 1;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}

	.imgbox {
		display: flex;
		flex-wrap: wrap;
		width: 690rpx;
		padding: 0 30rpx 30rpx 30rpx;
		background-color: #FFF;

		.logobox {
			width: 115rpx;
			text-align: center;
			font-size: 26rpx;
			font-family: SourceHanSansCN-Regular-, SourceHanSansCN-Regular;
			font-weight: normal;
			color: #222222;

			image {
				width: 60rpx;
				height: 60rpx;
				border-radius: 100%;
				margin-top: 30rpx;
			}

			.namebox {
				width: 115rpx;
				-webkit-line-clamp: 1;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				overflow: hidden;
				text-overflow: ellipsis;
				margin-top: 10rpx;
			}
		}
	}

	.actinfo {
		width: 690rpx;
		padding: 20rpx 30rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		// margin: 24rpx 0;
		.adderss {
			width: 690rpx;
			display: flex;
			align-items: center;
			padding: 10rpx 0;

			// height: 80rpx;
			.numbox {
				width: 188rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #666666;
				margin-right: 30rpx;
			}

			.weekbox {
				width: 502rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #222222;
			}

			.numinfo {
				width: 502rpx;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #222222;
				font-size: 32rpx;
				font-family: Source Han Sans CN-Medium, Source Han Sans CN;
				font-weight: 500;
				color: #222222;

				image {
					width: 26rpx;
					height: 28rpx;
					margin-right: 8rpx;
				}

				// >view{
				// 	width: fit-content;
				// 	height: 56rpx;
				// 	background: #FFF9FA;
				// 	border-radius: 8rpx;
				// 	padding: 0 14rpx;
				// 	line-height: 56rpx;
				// }
				.time {
					width: 530rpx;
					font-size: 32rpx;
					font-family: Source Han Sans CN-Regular, Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					margin: 20rpx 0;

					>view {
						// height: 56rpx;
						background: #FFF9FA;
						border-radius: 8rpx;
						width: fit-content;
						padding: 0 14rpx;
						// line-height: 56rpx;
						font-size: 32rpx;
						font-family: Source Han Sans CN-Medium, Source Han Sans CN;
						font-weight: 500;
						color: #222222;
					}
				}
			}
		}
	}

	.navbut {
		width: 750rpx;
		height: 128rpx;
		background: #FFFFFF;
		position: fixed;
		bottom: 0;

		>view {
			width: 690rpx;
			margin: 20rpx auto;
			height: 68rpx;
			background: #FF8A9B;
			border-radius: 36rpx;
			text-align: center;
			line-height: 68rpx;
			font-size: 32rpx;
			font-family: Source Han Sans CN-Medium, Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
</style>